<template>
  <basic-container>
    <el-form
        ref="sealFormRef"
        :model="sealForm"
        :rules="sealFormRules"
    >
<!--      =======================================================【基本信息】=======================================================-->
      <h3>基本信息</h3>
      <el-form-item label="印章名称" label-width="120px" prop="sealName">
        <el-input style="width: 400px" v-model="sealForm.sealName"></el-input>
      </el-form-item>
      <el-form-item label="印章内容" label-width="120px" prop="sealContent" >
        <el-input style="width: 400px" v-model="sealForm.sealContent" @blur="previewSeal"></el-input>
      </el-form-item>
      <el-form-item label="纳税人识别号" label-width="120px" v-if="sealType==='发票专用章'">
        <el-input style="width: 400px" v-model="sealForm.sealNumber" @blur="previewSeal"></el-input>
      </el-form-item>
      <el-form-item label="印章横向文" label-width="120px" prop="sealTransverse" >
        <el-input style="width: 400px" v-model="sealForm.sealTransverse" @blur="previewSeal" placeholder="可不填"></el-input>
      </el-form-item>
      <el-form-item label="印章下弦文" label-width="120px" prop="sealLower" v-if="sealType!=='发票专用章'">
        <el-input style="width: 400px" v-model="sealForm.sealLower" @blur="previewSeal" placeholder="可不填"></el-input>
      </el-form-item>
      <el-form-item label="印章类型" label-width="120px" prop="sealType">
        <el-select size="large" v-model="sealType" @change="changeSealType">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-divider />
<!--      =======================================================【制章内容】=======================================================-->
      <h3>制章内容</h3>
      <el-form-item label="制章方式" label-width="120px" prop="sealWay">
        <el-radio-group v-model="sealForm.sealWay" size="large">
          <el-radio-button label="1">模板印章</el-radio-button>
          <!--          <el-radio-button label="2">本地上传</el-radio-button>
                    <el-radio-button label="3">手绘印章</el-radio-button>-->
        </el-radio-group>
      </el-form-item>
<!--      =======================================================【选择印章样式】=======================================================-->
      <h4>选择印章样式</h4>
      <el-form-item label="印章样式" label-width="120px" prop="sealStyle">
        <!-- ==============================================================
         ============================【公章】============================
         ==================================================================-->
        <div class="style-list" v-if="sealType==='公章'">
          <div class="style-item" @click="setStyle(11)">
            <div :class="sealForm.sealStyle === 11 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img11"></div>
            </div>
            <div class="item-name"><p>圆形章-不带星</p></div>
          </div>
          <div class="style-item" @click="setStyle(12)">
            <div :class="sealForm.sealStyle === 12 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img12"></div>
            </div>
            <div class="item-name"><p>圆形章-带星</p></div>
          </div>
          <div class="style-item" @click="setStyle(13)">
            <div :class="sealForm.sealStyle === 13 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img13"></div>
            </div>
            <div class="item-name"><p>椭圆章</p></div>
          </div>
        </div>
        <!-- ==============================================================
         ============================【合同专用章】============================
         ==================================================================-->
        <div class="style-list" v-else-if="sealType==='合同专用章'">
          <div class="style-item" @click="setStyle(21)">
            <div :class="sealForm.sealStyle === 21 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img21"></div>
            </div>
            <div class="item-name"><p>圆形章-不带星</p></div>
          </div>
          <div class="style-item" @click="setStyle(22)">
            <div :class="sealForm.sealStyle === 22 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img22"></div>
            </div>
            <div class="item-name"><p>圆形章-带星</p></div>
          </div>
        </div>
        <!-- ==============================================================
         ============================【发票专用章】============================
         ==================================================================-->
        <div class="style-list" v-else-if="sealType==='发票专用章'">
          <div class="style-item" @click="setStyle(31)">
            <div :class="sealForm.sealStyle === 31 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img31"></div>
            </div>
            <div class="item-name"><p>椭圆章</p></div>
          </div>
        </div>
        <!-- ==============================================================
         ============================【财务专用章】============================
         ==================================================================-->
        <div class="style-list" v-if="sealType==='财务专用章'">
          <div class="style-item" @click="setStyle(41)">
            <div :class="sealForm.sealStyle === 41 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img41"></div>
            </div>
            <div class="item-name"><p>圆形章-不带星</p></div>
          </div>
          <div class="style-item" @click="setStyle(42)">
            <div :class="sealForm.sealStyle === 42 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img42"></div>
            </div>
            <div class="item-name"><p>圆形章-带星</p></div>
          </div>
          <div class="style-item" @click="setStyle(43)">
            <div :class="sealForm.sealStyle === 43 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img43"></div>
            </div>
            <div class="item-name"><p>椭圆章</p></div>
          </div>
        </div>
        <!-- ==============================================================
        ============================【人事专用章】============================
        ==================================================================-->
        <div class="style-list" v-if="sealType==='人事专用章'">
          <div class="style-item" @click="setStyle(51)">
            <div :class="sealForm.sealStyle === 51 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img51"></div>
            </div>
            <div class="item-name"><p>圆形章-不带星</p></div>
          </div>
          <div class="style-item" @click="setStyle(52)">
            <div :class="sealForm.sealStyle === 52 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img52"></div>
            </div>
            <div class="item-name"><p>圆形章-带星</p></div>
          </div>
          <div class="style-item" @click="setStyle(53)">
            <div :class="sealForm.sealStyle === 53 ?'item-border__active':'item-border'">
              <div class="item-pic"><img :src="img53"></div>
            </div>
            <div class="item-name"><p>椭圆章</p></div>
          </div>
        </div>

        <div class="style-curr">
          <div class="curr-border"><img :src="imgNow" style="width: 400px;height: 400px"></div>
        </div>
      </el-form-item>
<!--      =======================================================【印章颜色】=======================================================-->
      <el-form-item label="印章颜色" label-width="100px" prop="sealColor">
        <div class="print-color-list">
          <div class="print-color-item" @click="setColor(1)">
            <el-icon :style="sealForm.sealColor === 1 ? '':'display: none'"><Check /></el-icon>
          </div>
          <div class="print-color-item" @click="setColor(2)">
            <el-icon :style="sealForm.sealColor === 2 ? '':'display: none'"><Check /></el-icon>
          </div>
          <div class="print-color-item" @click="setColor(3)">
            <el-icon :style="sealForm.sealColor === 3 ? '':'display: none'"><Check /></el-icon>
          </div>
        </div>
      </el-form-item>
<!--      =======================================================【不透明度】=======================================================-->
      <el-form-item label="不透明度" label-width="100px" prop="sealOpacity">
        <el-slider v-model="sealForm.sealOpacity" :min="20" :max="100" style="width: 400px;" @change="previewSeal"/>
      </el-form-item>
      <el-form-item>
        <el-button size="large" type="primary" icon="Stamp" @click="submit">提交</el-button>
        <el-button size="large" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </basic-container>
</template>

<script setup>
import {computed, ref} from 'vue';
import img11 from '../../img/pub11.png'
import img12 from '../../img/pub12.png'
import img13 from '../../img/pub13.png'
import img21 from '../../img/pub21.png'
import img22 from '../../img/pub22.png'
import img31 from '../../img/pub31.png'
import img41 from '../../img/pub41.png'
import img42 from '../../img/pub42.png'
import img43 from '../../img/pub43.png'
import img51 from '../../img/pub51.png'
import img52 from '../../img/pub52.png'
import img53 from '../../img/pub53.png'

import { Check } from '@element-plus/icons'
import activeImg from '../../img/pub0.png'
import {addSealApi, addSealDetailApi, deleteFileArrayApi, getPrivateSealApi, getPublicSealApi} from '../../api/seal';
import {ElMessage} from 'element-plus';
import {getCurrentInstance} from 'vue';
import {mapGetters, useStore} from 'vuex';
const {proxy} = getCurrentInstance()
const options = [{
  value: '公章',
  label: "公章",
},{
  value: '合同专用章',
  label: "合同专用章",
},{
  value: '发票专用章',
  label: "发票专用章",
},{
  value: '财务专用章',
  label: "财务专用章",
},{
  value: '人事专用章',
  label: "人事专用章",
}]
const sealType = ref("公章")

const sealForm = ref({
  sealName: '',
  sealContent: '测试专用印章有限公司',
  sealTransverse: '测试专用章',
  sealLower: '',
  sealWay: 1,
  sealStyle: 11,
  sealColor: 1,
  sealOpacity: 80,
  sealType: 1,
  sealNumber: '',
  sealPath: ''
})

//印章归属者
const baseSealForm = ref({
  sealName: '',
  sealPath: '',
  sealStatus: 1,
  sealCreater: '',
  sealAuthorizeNum: 0,
})

const sealFormRef = ref(null)
const sealFormRules = ref({
  sealName: [{required: true, message: '请输入印章名称', trigger: "blur"}],
  sealContent: [{required: true, message: '请输入印章内容', trigger: "blur"},
    { min: 2, max: 14, message: '请输入2~14个字符', trigger: 'blur' },],
  sealWay: [{required: true, trigger: "blur"}],
  sealStyle: [{required: true, trigger: "blur"}],
  sealColor: [{required: true, trigger: "blur"}],
  sealOpacity: [{required: true, trigger: "blur"}],
  sealRule: [{required: true, trigger: "blur"}],
})

const setStyle = (index) => {
  sealForm.value.sealStyle = index
  previewSeal()
}

const setColor = (color) => {
  sealForm.value.sealColor = color
  previewSeal()
}

const imgNow = ref(activeImg)
//存储预览的所有图片
const tempImgArray = ref([])
const previewSeal = () => {
  sealFormRef.value.validateField('sealContent',(valid)=>{
    if(valid){
      if(sealType.value === "公章"){sealForm.value.sealType = 1}
      else if(sealType.value === "合同专用章"){sealForm.value.sealType = 2}
      else if(sealType.value === "发票专用章"){sealForm.value.sealType = 3}
      else if(sealType.value === "财务专用章"){sealForm.value.sealType = 4}
      else if(sealType.value === "人事专用章"){sealForm.value.sealType = 5}
      //console.log(sealForm.value.sealType)
      getPublicSealApi(sealForm.value)
          .then(res=>{
            imgNow.value = res.data.result
            tempImgArray.value.push(imgNow.value.split(".com/")[1])
          })
    }else {
      ElMessage.error("请输入印章内容！")
    }
  })
}

/**
 * 改变”印章类型“时改变表单数据
 */
const changeSealType = () => {
  if(sealType.value==='公章'){
    sealForm.value.sealTransverse = '测试专用章'
    sealForm.value.sealStyle = 11
    previewSeal()
  }
  else if(sealType.value==='合同专用章'){
    sealForm.value.sealTransverse = '合同专用章'
    sealForm.value.sealStyle = 21
    previewSeal()
  }
  else if(sealType.value==='发票专用章'){
    sealForm.value.sealTransverse = '发票专用章'
    sealForm.value.sealStyle = 31
    previewSeal()
  }
  else if(sealType.value==='财务专用章'){
    sealForm.value.sealTransverse = '财务专用章'
    sealForm.value.sealStyle = 41
    previewSeal()
  }
  else if(sealType.value==='人事专用章'){
    sealForm.value.sealTransverse = '人事专用章'
    sealForm.value.sealStyle = 51
    previewSeal()
  }

}


/**
 * 保存印章信息到数据库中
 */
const submit = () => {
  sealFormRef.value.validate((valid) =>{
    if (valid){
      sealForm.value.sealPath = imgNow.value
      addSealDetailApi(sealForm.value).then(res=>{
        if(res.data.responseSuccess){
          ElMessage.success("创建印章成功！")
          tempImgArray.value.pop()
          deleteFile(tempImgArray.value)
          addSeal()
        }else {
          ElMessage.error("创建失败，请重试！")
        }
      })
    }
  })
}

const store = useStore()
const userId = store.getters.userId

/**
 * 增加印章基础数据
 */
const addSeal = () => {
  baseSealForm.value.sealName = sealForm.value.sealName
  baseSealForm.value.sealPath = sealForm.value.sealPath
  baseSealForm.value.sealCreater = userId
  addSealApi(baseSealForm.value).then(res=>{
    if(res.data.responseSuccess){
      proxy.$router.push("/seal/seal-con")
    }else {
      ElMessage.error("创建失败，请重试！")
    }
  })
}

/**
 * 删除无用的图片
 * @param delArray
 */
const deleteFile = (delArray) => {
  let fileArray = delArray.toString()
  if(delArray.length !== 0){
    deleteFileArrayApi(fileArray).then(res=>{
      tempImgArray.value = []
    })
  }
}

/**
 * 取消操作
 */
const cancel = () => {
  deleteFile(tempImgArray.value)
  proxy.$router.push("/seal/seal-con")
}


</script>

<style scoped>
/deep/ .el-card__body{
  padding: 20px 60px;
}
/deep/ .el-form-item--default .el-form-item__content{
  margin-left: 20px;
}
.style-list{
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 480px;
}
.style-list .style-item{
  margin-top: 6px;
  margin-right: 12px;
  text-align: center;
}
.style-item .item-border{
  position: relative;
  width: 80px;
  height: 80px;
  padding: 10px;
  align-items: center;
  border: 1px solid #e4e6e9;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: none;
  transition: all .2s;
}
.style-item .item-border__active{
  position: relative;
  width: 80px;
  height: 80px;
  padding: 10px;
  align-items: center;
  border: 1px solid #0975e0;
  border-radius: 4px;
  cursor: pointer;
  -webkit-box-shadow: 0 0 12px 3px rgb(0 0 0 / 10%);
  box-shadow: 0 0 12px 3px rgb(0 0 0 / 10%);
  transition: all .2s;
}
.style-item .item-border:hover{
  border-color: #0975e0;
  -webkit-box-shadow: 0 0 12px 3px rgb(0 0 0 / 10%);
  box-shadow: 0 0 12px 3px rgb(0 0 0 / 10%);
  transition: all .2s;
}
.item-pic{
  width: 100%;
  height: 100%;
  display: flex;
}
.item-pic img{
  width: 100%;
  align-self: center;
}
.style-item .item-name{

}
.style-item .item-name p{
  margin: 0;
}

.style-curr{
  position: absolute;
  left: 520px;
  top: 6px;
}
.style-curr .curr-border{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 240px;
  height: 250px;
  border: 1px solid #e4e4e4;
  border-radius: 2px;
}
.style-curr .curr-border img{
  width: 200px;
}

.print-color-list{
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 4px;
}
.print-color-list .print-color-item{
  margin-right: 16px;
  width: 48px;
  height: 32px;
  text-align: center;
  line-height: 35px;
  background-color: red;
}
.print-color-item:nth-child(1){
  background-color: red;
}
.print-color-item:nth-child(2){
  background-color: black;
}
.print-color-item:nth-child(3){
  background-color: blue;
}
.print-color-item:nth-child(4){
  background-color: purple;
}
.print-color-item i{
  color: white;
}
</style>
